<template>
  <div>
    <el-input
      v-model="a"
      style="width: 40%"
      placeholder="请输入档案号或者姓名，手机号"
    />
    <el-button @click="info()">查询</el-button><br />
    <el-button @click="up = true">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="vid" v-if="false"> </el-table-column>
      <el-table-column fixed prop="vipid" label="档案号"> </el-table-column>
      <el-table-column prop="vipname" label="姓名"> </el-table-column>
      <el-table-column prop="vipsex" label="性别"> </el-table-column>
      <el-table-column prop="vipage" label="年龄"> </el-table-column>
      <el-table-column prop="manage" label="健康管理师"> </el-table-column>
      <el-table-column prop="phone" label="手机号码"> </el-table-column>
      <el-table-column prop="enrollTime" label="注册时间"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="upid(scope.row.vid), (aa = true)">修改</el-button>
          <el-button @click="del(scope.row.vipid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[2, 4]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!--拟态框-->
    <el-dialog title="新增" :visible.sync="up">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="ssss">
               <el-form-item label="档案号">
                    <el-input v-model="ssss.vip.vipid" /> 
            </el-form-item>
             
            <el-form-item label="姓名">
                    <el-input v-model="ssss.vip.vipname" />    
            </el-form-item>
                 <el-form-item label="性别">
                    <el-input v-model="ssss.vip.vipsex" />    
            </el-form-item>
            <el-form-item label="登录密码">
                    <el-input v-model="ssss.vip.vippassword" />    
            </el-form-item>
               
            <el-form-item label="身份证">
                    <el-input v-model="ssss.vip.card" />    
            </el-form-item>
                 <el-form-item label="手机号">
              <el-input v-model="ssss.vip.phone" />
                 
            </el-form-item>
               
            <el-form-item label="民族">
                    <el-input autocomplete="off" v-model="ssss.vip.ethnic" />  
               
            </el-form-item>
            <el-form-item label="出生日期">
                    <el-input autocomplete="off" v-model="ssss.vip.birth" />    
            </el-form-item>
            <el-form-item label="邮箱">
                    <el-input autocomplete="off" v-model="ssss.vip.mailbox" />  
               
            </el-form-item>
            <el-form-item label="婚姻状态">
                    <el-input v-model="ssss.vip.marital" />    
            </el-form-item>
            <el-form-item label="职业">
                   
              <el-input autocomplete="off" v-model="ssss.vip.occupation" />    
            </el-form-item>
            <el-form-item label="文化程度">
                   
              <el-input autocomplete="off" v-model="ssss.vip.education" />    
            </el-form-item>
            <el-form-item label="籍贯">
                    <el-input autocomplete="off" v-model="ssss.vip.origin" />  
               
            </el-form-item>
            <el-form-item label="健康管理师">
                   <el-select
                placeholder="请选择健康管理师"
                v-model="ssss.vip.manage"
              >
                <el-option
                  v-for="item in asd"
                  :key="item.id"
                  :value="item.id"
                  :label="item.managementname"
                ></el-option>
              </el-select>
                 
            </el-form-item>
            <el-button @click="isok()">确定</el-button>
          </el-form>
          <!--  
      <el-form :model="vip">
     <el-form-item label="档案号" >
      <el-input  autocomplete="off" v-model="vip.vipid"/>
    </el-form-item>
  <el-form-item label="姓名" >
      <el-input autocomplete="off" v-model="vip.vipname"/>
    </el-form-item>
     <el-form-item label="性别" >
      <el-input  autocomplete="off" v-model="vip.vipsex"/>
    </el-form-item>
    <el-form-item label="年龄" >
      <el-input  autocomplete="off" v-model="vip.vipage"/>
    </el-form-item>
<el-form-item label="登录密码" >
      <el-input  autocomplete="off" v-model="vip.vippassword"/>
    </el-form-item>
    <el-form-item label="身份证" >
      <el-input  autocomplete="off" v-model="vip.card"/>
    </el-form-item>
     <el-form-item label="手机号" >
  <el-input  autocomplete="off" v-model="vip.phone"/>
    </el-form-item>
    <el-form-item label="民族" >
      <el-input   autocomplete="off" v-model="vip.ethnic"/>
    </el-form-item>
<el-form-item label="出生日期" >
      <el-input   autocomplete="off" v-model="vip.birth"/>
    </el-form-item>
<el-form-item label="邮箱" >
      <el-input   autocomplete="off" v-model="vip.mailbox"/>
    </el-form-item>
<el-form-item label="婚姻状态" >
      <el-input  v-model="vip.marital"/>
    </el-form-item>
<el-form-item label="职业" >
      <el-input   autocomplete="off" v-model="vip.occupation"/>
    </el-form-item>
<el-form-item label="文化程度" >
      <el-input   autocomplete="off" v-model="vip.education"/>
    </el-form-item>
<el-form-item label="籍贯" >
      <el-input   autocomplete="off" v-model="vip.origin"/>
    </el-form-item>
<el-form-item label="健康管理师" >
     <el-select placeholder="请选择健康管理师" v-model="vip.manage">
    <el-option v-for="item in asd" :key="item.id" :value="item.id" :label="item.managementname"></el-option>
</el-select>
    </el-form-item>
   </el-form>
-->
        </el-tab-pane>
        <!--信息页-->
        <el-tab-pane label="动态信息" name="second">
          <el-form :model="ssss.cond">
               
            <el-form-item label="身高">
                    <el-input autocomplete="off" v-model="ssss.cond.height" />  
               
            </el-form-item>
                 <el-form-item label="体重">
              <el-input autocomplete="off" v-model="ssss.cond.weight" />
                 
            </el-form-item>
               
            <el-form-item label="舒张压">
                   
              <el-input autocomplete="off" v-model="ssss.cond.diastolic" />    
            </el-form-item>
            <el-form-item label="收缩压">
                   
              <el-input autocomplete="off" v-model="ssss.cond.systolic" />    
            </el-form-item>
            <el-form-item label="呼吸">
                   
              <el-input autocomplete="off" v-model="ssss.cond.breathe" />    
            </el-form-item>
            <el-form-item label="体重">
                    <el-input autocomplete="off" v-model="ssss.cond.body" />    
            </el-form-item>
            <el-form-item label="腰围">
                   
              <el-input autocomplete="off" v-model="ssss.cond.waistline" />    
            </el-form-item>
            <el-form-item label="臀围">
                   
              <el-input autocomplete="off" v-model="ssss.cond.hipline" />    
            </el-form-item>
            <el-form-item label="BML">
                    <el-input autocomplete="off" v-model="ssss.cond.bml" />    
            </el-form-item>
            <el-form-item label="血氧饱和度">
                    <el-input autocomplete="off" v-model="ssss.cond.blood" />  
               
            </el-form-item>
               </el-form
          >
        </el-tab-pane>
        <!--病史页-->
        <el-tab-pane label="病史" name="third">
          <el-form :model="ssss.med">
               
            <el-form-item label="既往史">
                   
              <el-input autocomplete="off" v-model="ssss.med.Previous" />    
            </el-form-item>
                 <el-form-item label="家族史">
              <el-input autocomplete="off" v-model="ssss.med.clan" />
                 
            </el-form-item>
               
            <el-form-item label="过敏史">
                    <el-input autocomplete="off" v-model="ssss.med.allergy" />  
               
            </el-form-item>
            <el-form-item label="病史">
                    <el-input autocomplete="off" v-model="ssss.med.history" />  
               
            </el-form-item>
            <el-form-item label="慢性病">
                    <el-input autocomplete="off" v-model="ssss.med.chronic" />  
               
            </el-form-item>
            <el-button @click="isok()">确定</el-button>
               </el-form
          >
        </el-tab-pane>
      </el-tabs>
       
    </el-dialog>

   

     <!-- 
   
  修改拟态框-->
  <el-dialog title="修改" :visible.sync="aa">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form :model="max.vip">
               <el-form-item label="档案号">
                    <el-input v-model="max.vip.vipid" />    
            </el-form-item>
             
            <el-form-item label="姓名">
                    <el-input v-model="max.vip.vipname" />    
            </el-form-item>
                 <el-form-item label="性别">
                    <el-input v-model="max.vip.vipsex" />    
            </el-form-item>
               <el-form-item label="手机号">
              <el-input v-model="max.vip.phone" />
                 
            </el-form-item>
            <el-form-item label="登录密码">
                    <el-input v-model="max.vip.vippassword" />    
            </el-form-item>
               
            <el-form-item label="身份证">
                    <el-input v-model="max.vip.card" />    
            </el-form-item>
                 <el-form-item label="手机号">
              <el-input v-model="max.vip.phone" />
                 
            </el-form-item>
               
            <el-form-item label="民族">
                    <el-input autocomplete="off" v-model="max.vip.ethnic" />    
            </el-form-item>
            <el-form-item label="出生日期">
                    <el-input autocomplete="off" v-model="max.vip.birth" />    
            </el-form-item>
            <el-form-item label="邮箱">
                    <el-input autocomplete="off" v-model="max.vip.mailbox" />  
               
            </el-form-item>
            <el-form-item label="婚姻状态">
                    <el-input v-model="max.vip.marital" />    
            </el-form-item>
            <el-form-item label="职业">
                   
              <el-input autocomplete="off" v-model="max.vip.occupation" />    
            </el-form-item>
            <el-form-item label="文化程度">
                   
              <el-input autocomplete="off" v-model="max.vip.education" />    
            </el-form-item>
            <el-form-item label="籍贯">
                    <el-input autocomplete="off" v-model="max.vip.origin" />    
            </el-form-item>
            <el-form-item label="健康管理师">
                   <el-select
                placeholder="请选择健康管理师"
                v-model="max.vip.manage"
              >
                <el-option
                  v-for="item in asd"
                  :key="item.id"
                  :value="item.id"
                  :label="item.managementname"
                ></el-option>
              </el-select>
                 
            </el-form-item>
            <el-button @click="upda()">确定</el-button>
          </el-form>
        </el-tab-pane>
        <!--修改信息页-->
        <el-tab-pane label="动态信息" name="second">
          <el-form :model="max">
               
            <el-form-item label="身高">
                    <el-input autocomplete="off" v-model="max.cond.height" />  
               
            </el-form-item>
                 <el-form-item label="体重">
              <el-input autocomplete="off" v-model="max.cond.weight" />
                 
            </el-form-item>
               
            <el-form-item label="舒张压">
                   
              <el-input autocomplete="off" v-model="max.cond.diastolic" />    
            </el-form-item>
            <el-form-item label="收缩压">
                   
              <el-input autocomplete="off" v-model="max.cond.systolic" />    
            </el-form-item>
            <el-form-item label="呼吸">
                   
              <el-input autocomplete="off" v-model="max.cond.breathe" />    
            </el-form-item>
            <el-form-item label="体重">
                    <el-input autocomplete="off" v-model="max.cond.body" />    
            </el-form-item>
            <el-form-item label="腰围">
                   
              <el-input autocomplete="off" v-model="max.cond.waistline" />    
            </el-form-item>
            <el-form-item label="臀围">
                   
              <el-input autocomplete="off" v-model="max.cond.hipline" />    
            </el-form-item>
            <el-form-item label="BML">
                    <el-input autocomplete="off" v-model="max.cond.bml" />    
            </el-form-item>
            <el-form-item label="血氧饱和度">
                    <el-input autocomplete="off" v-model="max.cond.blood" />  
               
            </el-form-item>
               </el-form
          >
        </el-tab-pane>
        <!--病史页-->
        <el-tab-pane label="病史" name="third">
          <el-form :model="max">
               
            <el-form-item label="既往史">
                   
              <el-input autocomplete="off" v-model="max.med.Previous" />    
            </el-form-item>
                 <el-form-item label="家族史">
              <el-input autocomplete="off" v-model="max.med.clan" />
                 
            </el-form-item>
               
            <el-form-item label="过敏史">
                    <el-input autocomplete="off" v-model="max.med.allergy" />  
               
            </el-form-item>
            <el-form-item label="病史">
                    <el-input autocomplete="off" v-model="max.med.history" />  
               
            </el-form-item>
            <el-form-item label="慢性病">
                    <el-input autocomplete="off" v-model="max.med.chronic" />  
               
            </el-form-item>
            <el-button @click="isnook()">确定</el-button>
               </el-form>
        </el-tab-pane>
        
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
let upvipid=null;
export default {
  data() {
    return {
      max: {
        vip:{
          vipid:"",
          vipname: "",
        vipsex: "",
        vippassword: "",
        card: "",
        phone: "",
        ethnic: "",
        birth: "",
        mailbox: "",
        marital: "",
        occupation: "",
        education: "",
        origin: "",
        manage: "",
        },
        cond:{
          height: "",
          weight: "",
          diastolic: "",
          systolic: "",
          breathe: "",
          body: "",
          waistline: "",
          hipline: "",
          bml: "",
          blood: "",
        },
        med:{
          Previous: "",
          clan: "",
          allergy: "",
          history: "",
          chronic: "",
        }
      },
      asd: [],
      tableData: [],
      ksk: {
        vid: "",
        vipid: "",
        vipname: "",
        vipsex: "",
        vippassword: "",
        card: "",
        phone: "",
        ethnic: "",
        birth: "",
        mailbox: "",
        marital: "",
        occupation: "",
        education: "",
        origin: "",
        manage: "",
      },
      vip: {
        vid: "",
        vipid: "",
        vipname: "",
        vipsex: "",
        manage: "",
        phone: "",
        enrolltime: "",
        vippassword: "",
        card: "",
        ethnic: "",
        birth: "",
        mailbox: "",
        marital: "",
        occupation: "",
        education: "",
        origin: "",
      },
      ssss: {
        vid: "",
        vip: {
          vipid: "",
          vipname: "",
          vipsex: "",
          vippassword: "",
          card: "",
          phone: "",
          ethnic: "",
          birth: "",
          mailbox: "",
          marital: "",
          occupation: "",
          education: "",
          origin: "",
          manage: "",
        },
        med: {
          Previous: "",
          clan: "",
          allergy: "",
          history: "",
          chronic: "",
        },
        cond: {
          height: "",
          weight: "",
          diastolic: "",
          systolic: "",
          breathe: "",
          body: "",
          waistline: "",
          hipline: "",
          bml: "",
          blood: "",
        },
      },
      a: "",
      aa: false,
      up: false,
      activeName: "first",
      //每页条数
      pageSize: 2,
      //总页数
      total: 50,
      //当前页
      currentPage4: 1,
    };
  },
  methods: {
    handleClick(tab, event) {},
    adcom() {
      alert(this.vip.manage);
    },

    cx() {
      this.axios.post("/tomcat/sele", { vipname: "" }).then((data) => {
        this.tableData = data.data;
      });
    },

    del(id) {
      this.axios.post("/tomcat/del", { vipid: id }).then((data) => {
        this.vip = data.data;
        if (data.data > 0) {
          alert("删除成功");
          this.info();
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.info();
    },
    info() {
      this.axios
        .post("/tomcat/info", {
          page: this.currentPage4,
          num: this.pageSize,
          v: { vipname: this.a },
        })
        .then((data) => {
          this.total = data.data.total;
          this.tableData = data.data.rows;
    
        });
    },

    isok() {
      console.log(this.ssss);
      this.axios.post("/tomcat/addvip", this.ssss).then((data) => {

        if (data.data > 0) {
          alert("添加成功");
          this.info();
        } else {
          alert("添加失败");
          this.info();
        }
      });
    },

    cxjiankangshi() {
      this.axios.post("/tomcat/bb").then((data) => {
        this.asd = data.data;
      });
    },
    upid(id) {
      this.axios.get("/tomcat/ab?vip="+id).then((data) => {
        console.log(data.data)
        this.max.vip = data.data.vip;
        this.max.cond = data.data.cond;
        this.max.med= data.data.med;
      });
    },
    isnook(){
      this.axios.post("/tomcat/updatavip",this.max).then((data)=>{
        if(data.data>0){
          alert("修改成功");
          console.log(data.data)
          this.info();
        }else{
          alert("修改失败");
          this.info();
        }
      })
    }
  },
  created() {
    this.info();
     this.cxjiankangshi();
  },
};
</script>

<style>
</style>